/*!
 * @ngx-dummy/Accordion-Simple library
 * Simple accordion created for angular / ionic projects.
 * https://github.com/ngx-dummy/accordion-simple
 *
 * Copyright  Vladimir Ovsyukov <ovsyukov@yandex.com>
 * Published under GNU LGPLv3 License
 */
@use './theming/vars.scss';

.accord-item {
	display: block;
	box-sizing: border-box;
	min-width: 10rem;
	min-height: 1rem;
	overflow: hidden;

	.accord-item__header {
		display: flex;
		position: relative;
		flex-direction: row;
		min-height: 1rem;
		max-height: 50px;
		overflow: visible;
		transition: 0.6s ease;
		background-color: var(--ngxd-head-item-color);
		color: var(--color-white);
		user-select: none;

		&:hover,
		&:active {
			background-color: var(--ngxd-head-item-color--active) !important;
			cursor: pointer;
		}

		&.opened {
			background-color: var(--ngxd-head-item-color--opened) !important;
		}

		.accord-item__header--btn {
			max-width: 2rem;
			border: none;
			background: transparent;
			font-size: x-large;
			text-align: center;
			vertical-align: middle;
		}

		.accord-item__collapse--btn {
			padding-right: 1px;
		}

		.accord-item__header--start,
		.accord-item__header--end {
			display: flex;
			flex: 0 0 1rem;
			align-items: center;
			justify-content: center;
			max-width: 1.5rem;
			padding-left: 1px;

			.accord-item__header--start-img {
				max-width: 1rem;
				margin-right: 0.5rem;
			}

			& > img {
				max-width: 1.5rem;
			}
		}

		.accord-item__header--end {
			padding-right: 1px;
			padding-left: 0;
			will-change: transform;

			&.active {
				transform: rotate(180deg);
				transition: transform 0.3s ease-out;
			}

			&:not(.active) {
				transform: rotate(0);
				transition: transform 0.3s ease-out;
			}
		}

		.header--control {
			display: flex;
			align-items: center;
			margin: 0.1rem;
			padding: 1rem;
			user-select: none;
			touch-action: pan-y;
		}

		.accord-item__title {
			flex: 1 1 100%;
			font-size: 14px;
			text-align: center;
		}

		.accord-item__collapse {
			flex: 0 0 1rem;
		}
	}

	.accord-item__body {
		touch-action: pinch-zoom pan-y;
		transform-origin: top;
		user-select: text;

		&.closed {
			position: absolute;
		}
	}
}
